He usado un selector de fecha de entrada html5 nativo en mi código. Hasta ahora me funciona bien (solo me preocupa Chrome y Edge). Pero me enfrento a un problema: quiero una forma uniforme de acceder al selector de fechas, pero me doy cuenta de que en mi selector de fechas hay un botón de selección de fechas (pseudoelemento) al que no se puede acceder a través del teclado. Intenté eliminar el pseudo- elemento al hacer que no se muestre, pero luego pierdo la funcionalidad para abrir el calendario emergente con el mouse.
Según los estándares de accesibilidad, si se puede acceder a un elemento mediante el mouse, también debería ser accesible mediante el teclado. así que necesito una solución alternativa a eso.
Estoy buscando una de las siguientes soluciones (cualquiera de ellas funcionará)
Hacer que el ícono de la fecha sea accesible por teclado.
Eliminar el ícono de fecha y hacer que el calendario aparezca haciendo clic con el mouse en lugar de hacer clic en el ícono.
¿Alguien sabe la solución a este problema?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DatePicker</title> <style> </style> </head> <body> <label for="mydate">DOB:</label> <input type="date" id="mydate"> </body> </html>Está utilizando un elemento nativo, por lo que, por definición, no existe una solución única, ya que cada navegador puede implementarlo de manera diferente.
Esta es tanto la ventaja como la desventaja de los elementos nativos. Si es accesible, es lo mejor; si no es accesible, de hecho no es su responsabilidad arreglarlo, sino la responsabilidad de los implementadores del navegador.
Si intenta corregir la accesibilidad del componente en un entorno determinado, corre un gran riesgo de crear problemas en otros entornos en los que no haya probado su corrección. Normalmente, no debe intentar interferir con el funcionamiento interno de los elementos nativos más allá de lo que puede configurar en estándar. Por cierto, es posible que el botón inaccesible que tiene en el fondo no esté accesible en el DOM estándar y, por lo tanto, es posible que no pueda hacer nada al respecto.
Si desea tener el control total, deberá implementar su propio selector de fechas. Sin embargo, tenga en cuenta que su propia solución generalmente será menos accesible que una nativa.
EN general, los componentes nativos son más accesibles y su comportamiento se adapta a la plataforma en ejecución. Si actualmente no son accesibles, se supone que mejorarán con el tiempo sin necesidad de que actualice su código. Esta es la razón por la que normalmente siempre debe preferir los componentes nativos a cualquier componente casero o proporcionado por la biblioteca. El uso de componentes nativos es, en principio, una victoria a largo plazo, tanto para usted como para los usuarios.